<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" id="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no">
  <link rel="stylesheet" href="//fps-pro.ws.126.net/fps-pro/frontends/libs/swiper/swiper-5.3.6.min.css" />
  <title>tea of news</title>
  <link rel="stylesheet" href="output.css">
</head>
<body>

  <div class="main">

  #macro (p_title)   ##截取双标题+视频图标+引号  适用于所有标签属性。
  #set ($title = ${tools.replaceAll($tools.stripTags([标题]),"\"","&quot;")})
  #set ($stitle = ${tools.replaceAll($tools.stripTags([副标题]),"\"","&quot;")})
  #end

  #macro (getImglist)
  #set($imgurl = '')
  #if($one.get('imgsrc3gtype') == '1') ## 1单图
  #if($one.get('imgsrc3g') != "")
  #set($imgurl = ${tools.replaceAll($one.get('imgsrc3g'),"http://","https://")})
  #else
  #set($imgurl = ${tools.replaceAll([图片链接],"http://","https://")})
  #end
  #elseif($one.get('imgsrc3gtype') == '2') ## 2三图
  #set($pics = $tools.split($one.get('imgsrc3g'),'||'))
  #foreach ($pic in $pics)
  #if($velocityCount == 1)
  #set($imgurl = ${tools.replaceAll($pic,"http://","https://")})
  #end
  #end
  #elseif($one.get('imgsrc3gtype') == '3' || $one.get('imgsrc3gtype') == '4') ##3大图 或 4视频
  #set($pics = $tools.split($one.get('imgsrc3g'),'||'))
  #foreach ($pic in $pics)
  #if($velocityCount == 2)
  #set($imgurl = ${tools.replaceAll($pic,"http://","https://")})
  #end
  #end
  #else
  #set($imgurl = ${tools.replaceAll([图片链接],"http://","https://")})
  #end
  #end

  <ul class="header">
    <li class="header_li" data-idx="1">
      <div class="header_a">新房</div>
    </li>
    <li class="header_li" data-idx="2">
      <div class="header_a">新闻</div>
    </li>
    <li class="header_li" data-idx="3">
      <div class="header_a">房价榜</div>
    </li>
    <li class="header_li" data-idx="4">
      <div class="header_a">直通车</div>
    </li>
  </ul>

  <div class="content-wrapper">
    <div class="content" data-idx="1">
      <div class="idx_ppt">
        <div class="swiper">
          <div class="swiper-wrapper">
            #set ($list=false)
            #set ($list=$tag.getList("topicid=04188H16;listnum=10;liststart=0;titlelength=28;pointstart=90;pointend=100;useproperty=1;"))
            #if ($list)
            #foreach ($one in $list)
            #p_title()
            #getImglist()
            <div class="swiper-slide" data-title="北京楼市，五环外有所升温">
              <a href="[链接]">
                <img alt='${title}' src="[图片链接]" style="object-fit: cover">
                <!--<h2 class="focus-title"><span>${title}</span></h2>-->
              </a>
            </div>
            #end#end
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="menu-wrapper">
        <a href="https://tea.news.163.com/special/tea_list_test/">
          <div class="menu-wrapper-inner">
            <img src="./img/8.png" alt="">
            <span class="name">图文新闻</span>
          </div>
        </a>
        <a href="https://tea.news.163.com/special/tea_list_test/">
          <div class="menu-wrapper-inner">
            <img src="./img/9.png" alt="">
            <span class="name">视频新闻</span>
          </div>
        </a>
        <a href="https://tea.news.163.com/special/tea_list_test/">
          <div class="menu-wrapper-inner">
            <img src="./img/10.png" alt="">
            <span class="name">直播新闻</span>
          </div>
        </a>
      </div>
      <div class="news-wrapper">
        #set ($list=$tag.getList("topicid=008798IF;listnum=10;pointstart=60;pointend=100;"))
        #if ($list)#foreach ($one in $list)
        #set($til = ${tools.replaceAll($tools.stripTags([标题]),"\"","＂")})
        #if($one.get('imgsrc3gtype') == '1') ## 1单图
        #getImglist()
        <a href="[链接]">
          <div class="single-pic card">
            <div class="title-wrapper">
              <div class="title">[标题]</div>
              <div class="source">第一财经资讯</div>
            </div>
            <img src="${imgurl}?imageView&thumbnail=200y90&quality=85" onerror='this.src="http://img2.cache.netease.com/f2e/news/index2016/images/pic3_error.jpg"'>
          </div>
        </a>
        #elseif($one.get('imgsrc3gtype') == '2') ## 2三图
        <a href="[链接]">
          <div class="tri-pic card">
            <div class="title">[标题]</div>
            <div class="pic-wrapper">
              #set($pics = $tools.split($one.get('imgsrc3g'),'||'))
              #foreach ($pic in $pics)
              <img src="${pic}" onerror='this.src="http://img2.cache.netease.com/f2e/news/index2016/images/pic3_error.jpg"'>
              #end
            </div>
            <div class="source">第一财经资讯</div>
          </div>
        </a>
        #elseif($one.get('imgsrc3gtype') == '3') ##3大图
        #getImglist()
        <a href="[链接]">
          <div class="single-pic-big card">
            <div class="title">[标题]</div>
            <img src="${imgurl}" onerror='this.src="http://img2.cache.netease.com/f2e/news/index2016/images/pic3_error.jpg"'>
            <div class="source">第一财经资讯</div>
          </div>
        </a>
        #elseif($one.get('imgsrc3gtype') == '4') ##4视频
        #getImglist()
        <a href="[链接]">
          <div class="video-news">
            <div class="title-wrapper">
              <div class="title">[标题]</div>
              <div class="length">2:00</div>
            </div>
            <div class="mask"></div>
            <div class="video-icon"></div>
            <img src="${imgurl}" onerror='this.src="http://img2.cache.netease.com/f2e/news/index2016/images/pic3_error.jpg"'>
          </div>
        </a>
        #end
        #end
        #end
      </div>
    </div>
    <div class="content" data-idx="2">
      2
    </div>
    <div class="content" data-idx="3">
      3
    </div>
    <div class="content" data-idx="4">
      4
    </div>
  </div>

</div>

  <script src="https://fps-pro.ws.126.net/fps-pro/frontends/libs/jquery/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="//fps-pro.ws.126.net/fps-pro/frontends/libs/swiper/swiper-5.3.6.min.js"></script>
</body>
<script type="text/javascript">
  (function(document,datracker,root){function loadJsSDK(){var script,first_script;script=document.createElement("script");script.type="text/javascript";script.async=true;script.src="https://hubble-js-bucket.nosdn.127.net/DATracker.globals.1.6.14.js";first_script=document.getElementsByTagName("script")[0];first_script.parentNode.insertBefore(script,first_script)}if(!datracker["__SV"]){var win=window;var gen_fn,functions,i,lib_name="DATracker";window[lib_name]=datracker;datracker["_i"]=[];datracker["init"]=function(token,config,name){var target=datracker;if(typeof(name)!=="undefined"){target=datracker[name]=[]}else{name=lib_name}target["people"]=target["people"]||[];target["abtest"]=target["abtest"]||[];target["toString"]=function(no_stub){var str=lib_name;if(name!==lib_name){str+="."+name}if(!no_stub){str+=" (stub)"}return str};target["people"]["toString"]=function(){return target.toString(1)+".people (stub)"};function _set_and_defer(target,fn){var split=fn.split(".");if(split.length==2){target=target[split[0]];fn=split[1]}target[fn]=function(){target.push([fn].concat(Array.prototype.slice.call(arguments,0)))}}functions="get_user_id track_heatmap register_attributes register_attributes_once clear_attributes unregister_attributes current_attributes single_pageview disable time_event get_appStatus track set_userId track_pageview track_links track_forms register register_once alias unregister identify login logout signup name_tag set_config reset people.set people.set_once people.set_realname people.set_country people.set_province people.set_city people.set_age people.set_gender people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.set_populationWithAccount  people.set_location people.set_birthday people.set_region people.set_account abtest.get_variation abtest.async_get_variable".split(" ");for(i=0;i<functions.length;i++){_set_and_defer(target,functions[i])}datracker["_i"].push([token,config,name])};datracker["__SV"]=1.6;loadJsSDK()}})(document,window["DATracker"]||[],window);
  // 初始化
  // 注意： 在Hubble平台创建一个类型为`Web`应用，复制对应的appkey，替换下面的 `88888888`
  // truncateLength:上报数据字段的长度设置
  // persistence: 存储到本地的方式
  // cross_subdomain_cookie : 若是存储到cookie，是否支持跨二级域
  DATracker.init('MA-8CD2-714973C5B6C8', {truncateLength: 255,persistence: "localStorage",cross_subdomain_cookie: false});
</script>
<!--<script src="./js/flexible.js"></script>-->
<script src="./js/index.js"></script>
</html>
